﻿$(document).ready(function () {
    var s1 = [20, 10, 21, 10, 5, 20, 4];
    var s2 = [5, 20, 4, 15, 20, 10, 21];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['HTML 5', 'RDBMS Basics', 'Core Java', 'JSP and Servlets', 'Aspect Oriented Programming', 'ExtJS', 'MongoDB'];

    var plot1 = $.jqplot('chart-panel', [s1, s2], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: { fillToZero: true }
        },
        title: 'Exam wise performance',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series: [
            { label: 'Correct Answers' },
            { label: 'Wrong Answers' }
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            //location: 'nw'
            placement: 'outsideGrid'
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                angle: -30,
                fontSize: '10pt'
            }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: { formatString: '%d' }
            }
        }
    });
});